<template>
	<view class="police">
		<view class="indexTop">
			<view class="top">
				<image src="/static/imgs/headbg.png" mode="scaleToFill" class="headbg"></image>
			</view>
			<!-- 民警端 -->
			<view class="flex" v-if="mjActive">
				<view @click="toTaskManagement">
					<image src="../../static/imgs/icon1.png" class="ii"/>
					<span>任务管理</span>
				</view>
				<view @click="totaskDistribution">
					<image src="../../static/imgs/icon2.png" class="ii"/>
					<span>任务下派</span>
				</view>
			</view>
			<!-- 网格员 -->
			<view class="flex" v-if="wgyActive">
				<view @click="toTaskManagement">
					<image src="../../static/imgs/icon1.png" class="ii"></image>
					<span>任务管理</span>
				</view>
				<!-- <view  @click="toPatrol">
					<img src="../../static/imgs/icon1.png" >
					<span>一周一巡查</span>
				</view> -->
				<view @click="toFeedback">
					<view class="icobn3">
						<image src="/static/imgs/icon3.png" mode="" class="ii"></image>
					</view>
					<!-- <img src="../../static/imgs/icon1.png" > -->
					<span>重点区域<br>巡查反馈</span>
				</view>
			</view>
			<!-- 各单位 -->
			<view class="flex" v-if="gdwActive">
				<view @click="toTaskManagement">
					<image src="../../static/imgs/icon1.png" class="ii"/>
					<span>任务管理</span>
				</view>
				<!-- <view  @click="zhuangxiang">
					<img src="../../static/imgs/icon1.png" >
					<span>专项巡查</span>
				</view> -->
				<view @click="xiangsuo">
					<view class="icobn3">
						<image src="/static/imgs/icon3.png" mode="" class="ii"></image>
					</view>
					<!-- <img src="../../static/imgs/icon1.png" > -->
					<span>重点区域<br>巡查反馈</span>
				</view>
			</view>
		</view>
		<view class="subheading">
			<img src="../../static/imgs/tip.png" >
			<span v-if="mjActive">已下派任务</span>
			<span v-else>已接收任务</span>
		</view>
		<scroll-view @scrolltolower="loadMoreData" scroll-y class="content" >
			<!-- <view > -->
				<view class="contentList" v-for="item in dataList" :key="item.id" @click="toDetails(item.id)">
					<view class="contentListTop">
						<view class="contentListtitle">
						{{item.eventName}}
						</view>
						<view class="contentListstate">
							<span style="background: #d9001b;" v-if="item.eventStatus == '0'">待接收</span>
							<span style="background: #fe7a21;" v-else-if="item.eventStatus == '1'">待完成</span>
							<span style="background: #137a29;" v-else-if="item.eventStatus == '2'">已完成</span>
							<span style="background: #5425a2;" v-else-if="item.eventStatus == '3'">已驳回</span>
							<span style="background: #5425a2;" v-else>其他</span>
						</view>
					</view>
					<view class="contentListTime">
						事发时间：{{item.eventTime}}
					</view>
				</view>
				<view class="contentNull" v-if="dataList.length == 0" >暂无数据</view>
				<view class="contentOut" v-if="dataList.length != 0 && contentOut">已经到底了</view>
			<!-- </view> -->
		</scroll-view>
		<tui-tabbar :tabBar="tabBar" :current="current" @click="tabbarSwitch" color="#9B9B9B" selectedColor="#3291F8" iconSize="48">	
		</tui-tabbar>
		<!-- 提示任务待接收弹窗 -->
		<view v-if="showdialog" class="showDialog">
			<view class="boxWc">
				<view class="notification">
					<view class="notificationText">{{showText}}</view>
					<view class="notificationBut">
						<span @click="hideDialog">确定</span>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState, mapGetters, mapMutations} from 'vuex'
	const FLAG = 'wTSNswY21B5NW75-1ZDj4iIz6htIlF1_Omj32shdEM4'; //订阅信息模板
	export default {
		components: {
		},
		data() {
			return {
				showdialog:false,
				contentOut:false,
				showText:'',
				current: 0,
				size:'10',
				currentt:'1',
				pages:'',
				dataList:[]
			};
		},
		computed: {
			...mapGetters(['tabBar', "hasLogin"]),
			...mapState(["userInfo", 'token']),
			mjActive(){
				if(this.userInfo.roleCode == 'mj'){
					return true
				}else{
					return false
				}
			},
			wgyActive(){
				if(this.userInfo.roleCode == 'wgy'){
					return true
				}else{
					return false
				}
			},
			gdwActive(){
				if(this.userInfo.roleCode == 'gdw'){
					return true
				}else{
					return false
				}
			}
		},
		onLoad() {
			this.showTipDialong();
			(this.token!='' && this.token!=null) && this.isUserLogin();
		},
		onUnload() {},
		onShow() {
			this.getData()
		},
		onReady() {},
		methods: {
			isUserLogin() {
				if(this.userInfo.bak3==null || this.userInfo.bak3=='') {
					//如果用户登录返回bak3为空，说明没有获取openid，需要wx.login获取
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (loginRes)=> {
							let code = loginRes.code;
							this.$apis.getOpenId({
								phone: this.userInfo.phone, 
								jsCode: code 
							}).then(res=>{
								this.requestSubscribe();
							})
						}
					}) 
				} else {
					//已经获取过openid的，判断是否订阅就行
					wx.getSetting({
						withSubscriptions: true,
						success:(res)=>{
							// console.log(11111, res.subscriptionsSetting)
							let s = res.subscriptionsSetting;
							if(s[FLAG] && s[FLAG]=="accept") { //已订阅
								console.log('已订阅');
							} else { //未订阅
								this.requestSubscribe();
							}
						},
					})
				}
			},
			/** 消息订阅弹框 */
			requestSubscribe() {
				uni.showModal({
					title: '订阅提示',
					content: '是否允许任务接收消息提醒',
					confirmText:"同意",
					cancelText:"拒绝",
					success: (res)=> {
						if (res.confirm) {
							//调用订阅消息
							this.MessageCb();
						} else if (res.cancel) {
							///显示第二个弹说明一下
							uni.showModal({
								title: '温馨提示',
								content: '拒绝将无法接收任务到达消息',
								confirmText:"知道了",
								cancelText:"订阅",
								success: (res1) =>{
									if (res1.cancel) {
										this.MessageCb();
									}
								}
							});
						}
					}
				});
			},
			/** 调用订阅消息 */
			MessageCb() {
				uni.requestSubscribeMessage({
					tmplIds: [FLAG],
					success (res) { 
						console.log('订阅成功',res);
					},
					fail(res) {
						console.log('订阅失败',res);
					},
				})
			},
			getData(){
				let data = {
					size:this.size,
					status: 0,
					current: this.currentt
				}
				if(this.userInfo.roleCode != 'mj'){
					data.adminId = this.userInfo.id
					data.status = '1'
				}else{
					data.createId = this.userInfo.id
				}
				this.$apis.getIndexLIst(data).then(res =>{
					if(res.code == '20000'){
						if(this.currentt == 1){
							this.dataList = res.data.page.records
							this.pages = res.data.page.pages
						}else{
							res.data.page.records.map(item =>{
								this.dataList.push(item)
							})
						}
						
					}
				})
			},
			// 跳转任务管理
			toTaskManagement(){
				wx.navigateTo({
				  url: '/pages/threeTerminal/taskManagement'
				})
			},
			
			totaskDistribution(){
				wx.navigateTo({
				  url: '/pages/threeTerminal/taskDistribution'
				})
			},
			xiangsuo(){
				wx.navigateTo({
				  url: '/pages/userViews/taskList?type=xs'
				})
			},
			
			zhuangxiang(){
				wx.navigateTo({
				  url: '/pages/userViews/taskList?type=zx'
				})
			},
			
			// 一周一巡查
			toPatrol(){
				wx.navigateTo({
				  url: '/pages/userViews/taskList?type=yz'
				})
			},
			// 巡查反馈
			toFeedback(){
				wx.navigateTo({
				  url: '/pages/userViews/taskList?type=xs'
				})
			},
			// 任务详情
			toDetails(id){
				wx.navigateTo({
				  url: '/pages/threeTerminal/details?id=' + id
				})
			},
			tabbarSwitch(e) {
				if (e.index == this.current) return
				if (e.index == 1) {
					uni.switchTab({
						url: '/pages/threeTerminal/taskTabba'
					})
				} else if (e.index == 2) {
					uni.switchTab({
						url: '/pages/user/user'
					})
				}
			},
			// 关闭任务待接收提示
			hideDialog(){
				this.showdialog = false
				this.toTaskManagement()
			},
			// 显示任务待接收提示
			showTipDialong(){
				if(this.userInfo.roleCode == 'mj') return
				this.$apis.taskToBeReceived().then(res =>{					
					if(res.code == '20000' && res.data.length != 0){
						this.showText = '您有' + res.data.length  + '条任务待接收，请及时查看'
						this.showdialog = true
					}
				})
			},
			// 触底滚动
			loadMoreData(){
				this.currentt++
				if(this.pages >= this.currentt){
					this.getData()
				}else{
					this.dataList.length != 0 && (this.contentOut = true)
				}
			}
		}
	}
</script>

<style lang="scss">
.top {
    position: relative;
	width: 100%;
}
.headbg {
	width: 100%;
	height: 400rpx !important;
}
.flex {
    position: absolute;
    top: 55%;
    margin: auto;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    background: #fff;
    width: 90%;
    border-radius: 20rpx;
    padding: 40rpx 20rpx;
	box-shadow: 1px 1px 4px #eee;
	.ii {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
	}
	.icobn3 {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 10rpx;
		border-radius: 30rpx;
		background: #66dd5d;
		position: relative;
		image, img {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			top: 0;
			width: 60rpx;
			height: 60rpx;
			margin: auto;
		}
	}
}
	.police{height: 100vh;}
	.indexTop{width: 100%; height: 400rpx; background-size: 100% 100%; position: relative;}
	.subheading{
		position: relative;
		margin-top: 100rpx;
		padding-left: 25rpx;
		font-size: 33rpx;
		font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
		font-weight: 650;
		letter-spacing: 1px;
		img{
			position: absolute;
			left: 10rpx;
			width: 45rpx;
			height: 45rpx;
			z-index: -1;
		}
	}
	.content{ padding: 0 25rpx; height: calc(100% - 400rpx - 250rpx); overflow-y: auto;
		.contentList{ margin-top: 30rpx; padding: 0 20rpx;
			.contentListTop{display: flex; align-items: center; margin-bottom: 20rpx;
				.contentListtitle{
					width: calc(100% - 120rpx);
					font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
					font-weight: 650;
					font-size: 40rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				.contentListstate{width: 120rpx;
					span{padding: 5rpx 15rpx; color: #ffffff; border-radius: 10rpx;}
				}
			}
			.contentListTime{
				font-size: 28rpx;
				color: #959CA6;
			}
		}
		.contentNull{text-align: center; margin-top: 40%; color: #333333; font-size: 32rpx;}
	}
	.contentOut{margin: 50rpx 0 30rpx 0; text-align: center; color: #333333; font-size: 32rpx;}
	.showDialog{position: fixed; top: 0; width: 100%; height: 100%; z-index: 9999;
		.boxWc{position: relative; width: 100%; height: 100%;
			.notification{display: flex; align-items: center; justify-content: center; flex-flow: column; position: absolute; left: 30rpx; top: calc(50% - 225rpx); height: 450rpx; width: calc(100% - 60rpx); background: #ffffff; border-radius: 15rpx; box-shadow:2px 2px 5px rgba(0, 0, 0, 0.349019607843137);
				.notificationText{font-size: 40rpx;}
				.notificationBut{ margin-top: 120rpx;
					span{padding: 30rpx 100rpx; border-radius: 15rpx; color: #ffffff; font-size: 35rpx; background: linear-gradient(90deg, rgba(23, 72, 244, 1) 0%, rgba(46, 127, 243, 1) 100%);}
				}
			}
		}
	}
</style>